<template>
<div class="page">
  <div class="top">
    <div class="left">
      <span class="text">我的积分</span>
      <span class="num">0</span>
      <span>
        本月积分兑换：0 / 500000
      </span>
    </div>
    <div class="right">
      <Button class="btn" @click="modal1 = true">
        <span>商品兑换</span>
        <span class="iconfont icon-remen"></span>
      </Button>
    </div>
  </div>
  <Tabs value="name1" v-model="tabValue">
    <TabPane label="积分明细" name="name1"></TabPane>
    <TabPane  label="兑换记录" name="name2"></TabPane>
  </Tabs>

  <div class="content">
    <!--积分明细-->
    <Table v-show="tabValue == 'name1'" :columns="columns1" :data="data1"></Table>
    <!--兑换记录-->
    <Table v-show="tabValue == 'name2'" :columns="columns2" :data="data2"></Table>

  </div>

  <Modal
      width="420px"
      class="pop"
      v-model="modal1"
      title="兑换商品">
      <div>
        <Input/>
      </div>
    <div class="pop-footer" slot="footer">
      <Button class="btn" type="primary" long>使用积分兑换</Button>
      <Button class="btn" long>
        <span>支付仓储兑换</span>
        <span class="iconfont icon-remen"></span>
      </Button>
    </div>
  </Modal>
</div>
</template>

<script>
export default {
  name: "points",
  data() {
    return {
      modal1: false,
      tabValue: 'name1',
      columns1: [
        {
          title: '时间',
          key: 'name'
        },
        {
          title: '类型',
          key: 'age'
        },
        {
          title: '积分',
          key: 'address'
        },
        {
          title: '相关编号',
          key: 'address'
        }
      ],
      data1: [
        {
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park',
          date: '2016-10-03'
        },
        {
          name: 'Jim Green',
          age: 24,
          address: 'London No. 1 Lake Park',
          date: '2016-10-01'
        },
        {
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park',
          date: '2016-10-02'
        },
        {
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          date: '2016-10-04'
        }
      ],
      columns2: [
        {
          title: '商品名称',
          key: 'name'
        },
        {
          title: '相关编号',
          key: 'age'
        },
        {
          title: '兑换方式',
          key: 'address'
        },
        {
          title: '积分',
          key: 'address'
        },
        {
          title: '仓储费',
          key: 'address'
        },
        {
          title: '兑换时间',
          key: 'address'
        },
        {
          title: '状态',
          key: 'address'
        },
        {
          title: '操作',
          key: 'address'
        }
      ],
      data2: [
        {
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park',
          date: '2016-10-03'
        },
        {
          name: 'Jim Green',
          age: 24,
          address: 'London No. 1 Lake Park',
          date: '2016-10-01'
        },
        {
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park',
          date: '2016-10-02'
        },
        {
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          date: '2016-10-04'
        }
      ]
    }
  }
}
</script>

<style scoped lang="less">
.page {
  .top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: @primary-color;
    padding: 24px;
    border-radius: 4px;
    margin-bottom: 32px;
    .left {
      color: #FFFFFF;
      font-size: 12px;
      .text {
        display: block;
       font-size: 14px;
      }
      .num {
        display: block;
        font-size: 32px;
      }
    }
    .right {
      .btn {
        background: #FFFFFF;
        border: 0;
        color: @t-title-color;
        .iconfont {
          color: red;
        }
      }
    }
  }
  .content {
    margin-top: 32px;
  }
}
.pop {
  &:deep(.ivu-modal) {
    .pop-footer {
      .btn {
        margin: 0;
        margin-top: 12px;
        &:first-child {
          margin-top: 0;
        }
        .iconfont {
          color: red;
        }
      }
    }
    .ivu-modal-footer {
      border: 0;
    }
  }
}
</style>